"use client"
import Content from '@/app/admin/page'
import React, { useEffect, useState } from 'react';
import { Button, Space, Table, Tag, Popconfirm, message } from 'antd';
import Model from '@/app/admin/users/components/Modal'

import { getContractList, delContract } from '@/api/contractApi'
import { leaseContracts } from '@/utils/data.json'
export default function Home() {
  const [data, setData] = useState([]);

  const Init = async () => {
    const res = await getContractList()
    if (res?.flag) {
      setData(res.data)
    } else {
      message.error('服务器未响应');
    }
  }
  useEffect(() => {
    Init()
  }, [])
  // 删除确认框
  const DelUser = async (_id: string) => {
    await delContract({ _id })
    await Init()
    message.success('操作成功');
  };
  // 弹窗
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modelPrpos, setModelPrpos] = useState({});


  const columns: any = [
    {
      title: '合同 ID',
      dataIndex: 'contractId',
      key: 'contractId',
    },
    {
      title: '客户(昵称)',
      dataIndex: 'customerId',
      key: 'customerId',
      render: (text: any) => {
        return text.length ? text[0] : '-'
      }
    },
    {
      title: '电池(型号)',
      dataIndex: 'batteryId',
      key: 'batteryId',
      render: (text: any) => {
        return text.length ? text[0] : '-'
      }
    },
    {
      title: '租赁开始时间',
      dataIndex: 'startDate',
      key: 'startDate',
      render: (text: number) => {
        return text
      },
    },
    {
      title: '租赁结束时间',
      dataIndex: 'endDate',
      key: 'endDate',
      render: (text: number) => {
        return text
      },
    },
    {
      title: '租金(元/月)',
      dataIndex: 'rentalFee',
      key: 'rentalFeee',
      width: 120,
    },
    {
      title: '支付状态',
      key: 'paymentStatus',
      dataIndex: 'paymentStatus',
      render: (_: any, record: any) => (
        _ === '未支付' ?
          <Tag color='#f50' key={_}>
            {_}
          </Tag>
          : <Tag color='#87d068' key={_}>
            {_}
          </Tag>
      ),
    },
    {
      title: '合同类型',
      dataIndex: 'contractType',
      key: 'contractType',
    },
    {
      title: '支付方式',
      dataIndex: 'paymentMethod',
      key: 'paymentMethod',
    },
    {
      title: '押金金额',
      dataIndex: 'deposit',
      key: 'deposit',
    },
    {
      title: '逾期费率(%/天)',
      dataIndex: 'lateFeeRate',
      key: 'lateFeeRate',
      width: 150,
    },
    {
      title: '续约次数',
      dataIndex: 'renewalTimes',
      key: 'renewalTimes',
    },
    {
      title: '终止原因',
      dataIndex: 'terminationReason',
      key: 'terminationReason',
    },
    {
      title: '签约日期',
      dataIndex: 'signDate',
      key: 'signDate',
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: any) => (
        <Space size="middle">
          <Popconfirm
            title="是否删除这条数据?"
            onConfirm={() => DelUser(record._id)}
            okText="是"
            cancelText="否"
          >
            <Button color="danger" variant="solid" size='small'>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (<Content>
    <div
      style={{
        padding: 24,
        minHeight: 360,
        background: '#fff',
        borderRadius: 10,
        flex: 1,
        overflow: 'auto'
      }}
    >
      <Table columns={columns} dataSource={data} rowKey={(record: any) => record._id} />
      <Model isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} modelPrpos={modelPrpos} Init={Init} />
    </div>
  </Content>
  );
};
